<template>
    <div>
        <div v-if="pageindex==1">
            <div class="naviwrap" id="hpagewrap">
                <div class="navi">
                    <h1><a href="/" style="position:absolute;"><span class="logo-wrap"></span><span class="logo-word">Poolgpu</span></a></h1>
                    <ul>
                        <li><a href="/#/mainpage?cointype=ETH">ETH</a></li>
                        <li><a href="/#/mainpage?cointype=ETC">ETC</a></li>
                        <li><a href="http://zec.poolgpu.com/page/" target="_blank">ZEC</a></li>
                        <li><a href="/#/mainpage?cointype=SC">SC</a></li>
                        <li><a href="http://btx.poolgpu.com" target="_blank">BTX</a></li>
                        <li><a href="http://dcr.poolgpu.com" target="_blank">DCR</a></li>
                        <li><el-badge value="new" class="badgeitem"><a href="/#/mainpage?cointype=XWC">XWC</a></el-badge></li>
                        <li style="margin-left:25px;"><a href="/#/minerpage?cointype=ETH">矿工查询</a></li>
                        <li><a href="/#/help">挖矿帮助</a></li>
                        <li class="isactive"><a href="/">首页</a></li>
                    </ul>
                </div>
            </div>
            <div class="notice_wrap" v-html="noticeWords"></div>
            <div class="banner">
                <div class="inner">
                    <h1>{{welcomewords[parseInt(pageindex) - 1]}}</h1>
                    <div class="search-box">
                        <div>
                            <el-input :placeholder="'请输入'+selectedCoinType+'地址'" v-model="searchCoinAddr" class="input-with-select" @keyup.enter.native="searchData">
                                <el-select v-model="selectedCoinType" slot="prepend" placeholder="请选择币种">
                                    <el-option v-for="coin in coins" :key="coin" :value="coin"></el-option>
                                </el-select>
                            </el-input>
                        </div>
                        <div>
                            <el-button @click="searchData()" type="primary">搜索</el-button>
                        </div>
                    </div>
                    <div class="showcoins">
                        <div>
                            <div class="cardwrap">
                                <el-card>
                                    <div @click="changePage('ETH')">
                                        <div class="coinpic ethpic"></div>
                                        <div><el-button type="info">ETH</el-button></div>
                                    </div>
                                </el-card>
                            </div>
                            <div class="cardwrap">
                                <el-card>
                                    <div @click="changePage('ETC')">
                                        <div class="coinpic etcpic"></div>
                                        <div><el-button type="info">ETC</el-button></div>
                                    </div>
                                </el-card>
                            </div>
                            <!--<div style="margin-top:20px;"></div>-->
                            <div class="cardwrap">
                                <el-card>
                                    <div @click="changePage('ZEC')">
                                        <div class="coinpic zecpic"></div>
                                        <div><el-button type="info">ZEC</el-button></div>
                                    </div>
                                </el-card>
                            </div>
                            <div class="cardwrap">
                                <el-card>
                                    <div @click="changePage('SC')">
                                        <div class="coinpic scpic"></div>
                                        <div><el-button type="info">SC</el-button></div>
                                    </div>
                                </el-card>
                            </div>
                            <div class="cardwrap">
                                <el-card>
                                    <div @click="changePage('BTX')">
                                        <div class="coinpic btxpic"></div>
                                        <div><el-badge value="hot" class="newbtnbadge"><el-button type="info">BTX</el-button></el-badge></div>
                                    </div>
                                </el-card>
                            </div>
                            <div class="cardwrap">
                                <el-card>
                                    <div @click="changePage('DCR')">
                                        <div class="coinpic dcrpic"></div>
                                        <div><el-button type="info">DCR</el-button></div>
                                    </div>
                                </el-card>
                            </div>
                            <div class="cardwrap">
                                <el-card>
                                    <div @click="changePage('XWC')">
                                        <div class="coinpic xwcpic"></div>
                                        <div><el-badge value="new" class="newbtnbadge"><el-button type="info">XWC</el-button></el-badge></div>
                                    </div>
                                </el-card>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="pageindex==2">
            <div class="naviwrap">
                <div class="navi">
                    <h1><a href="/" style="position:absolute;"><span class="logo-wrap"></span><span class="logo-word">Poolgpu</span></a></h1>
                    <ul>
                        <li>
                            <div>
                                <el-select v-model="nowcoin" size="small" popper-class="coinchoose" @change="changeUrl">
                                    <el-option
                                        v-for="item in coins"
                                        :key="item"
                                        :label="item"
                                        :value="item">
                                    </el-option>
                                </el-select>
                            </div>
                        </li>
                        <li v-bind:class="{isactive:(pagename=='mainpage')}"><a :href="'/#/mainpage?cointype='+cointype">矿池统计</a></li>
                        <li v-bind:class="{isactive:(pagename=='minerpage')}"><a :href="'/#/minerpage?cointype='+cointype">矿工查询</a></li>
                        <li v-bind:class="{isactive:(pagename=='helpage')}"><a href="/#/help">挖矿帮助</a></li>
                        <li v-bind:class="{isactive:(pagename=='homepage')}"><a href="/">首页</a></li>
                    </ul>
                </div>
            </div>
            <div class="notice_wrap" v-html="noticeWords"></div>
        </div>
        <div v-if="pageindex==3">
            <div class="naviwrap" id="helpagewrap">
                <div class="navi">
                    <h1><a href="/" style="position:absolute;"><span class="logo-wrap"></span><span class="logo-word">Poolgpu</span></a></h1>
                    <ul>
                        <li><a href="/#/mainpage?cointype=ETH">ETH</a></li>
                        <li><a href="/#/mainpage?cointype=ETC">ETC</a></li>
                        <li><a href="/#/mainpage?cointype=EXP">EXP</a></li>
                        <li><a href="http://zec.poolgpu.com/page" target="_blank">ZEC</a></li>
                        <li><a href="/#/mainpage?cointype=SC">SC</a></li>
                        <li><a href="http://btx.poolgpu.com" target="_blank">BTX</a></li>
                        <li><a href="http://dcr.poolgpu.com" target="_blank">DCR</a></li>
                        <li><el-badge value="new" class="badgeitem"><a href="/#/mainpage?cointype=XWC">XWC</a></el-badge></li>
                        <li style="margin-left:25px;"><a href="/#/minerpage?cointype=ETH">矿工查询</a></li>
                        <li class="isactive"><a href="/#/help">挖矿帮助</a></li>
                        <li><a href="/">首页</a></li>
                    </ul>
                </div>
            </div>
            <div class="notice_wrap" v-html="noticeWords"></div>
        </div>
    </div>
</template>
<script>
    export default {
        name: "topnav",
        data() {
            return {
                coins: ["ETH", "ETC", "EXP", "ZEC", "SC", "BTX", "DCR", "XVG", "XWC"],
                selectedCoinType: "ETH",
                searchCoinAddr: "",
                nowcoin: "",
                welcomewords: ["欢迎来到 Poolgpu"],
                noticeWords: '为回馈各位矿工支持，GPU矿池上线XWC显卡智能挖矿，目前收益高于eth10％左右。',
                bannerpics: [],
                coindata: [],
                coinpics: {
                    eth: "../assets/imgs/ethpic.png",
                    etc: "../assets/imgs/etcpic.png",
                    exp: "../assets/imgs/exppic.png",
                    zec: "../assets/imgs/zecpic.png",
                    sc: "../assets/imgs/scpic.png",
                    btx: "../assets/imgs/btxpic.png",
                    dcr: "../assets/imgs/dcrpic.png",
                    xwc: "../assets/imgs/xwcpic.png"
                }
            }
        },
        methods: {
            searchData: function() {
                if(!this.searchCoinAddr) return;
                let u = '';
                if(this.selectedCoinType == "ZEC") {
                    u = "http://zec.poolgpu.com/page/#/miner?addr=" + this.searchCoinAddr;
                } else if ((this.selectedCoinType == "BTX") || (this.selectedCoinType == "DCR") || (this.selectedCoinType == "XVG")) {
                    u = 'http://' + this.selectedCoinType.toLowerCase() + '.poolgpu.com/#/minerpage?cointype=' + this.selectedCoinType + '&miner=' + this.searchCoinAddr;
                } else {
                    u = 'http://www.poolgpu.com/#/minerpage?cointype=' + this.selectedCoinType + '&miner=' + this.searchCoinAddr;
                }
                window.location.href = u;
            },
            changePage: function(cointype) {
                if(cointype == "ZEC") {
                    window.open("http://zec.poolgpu.com/page/#/");
                } else if(cointype == "BTX") {
                    window.open("http://btx.poolgpu.com");
                } else if(cointype == "DCR") {
                    window.open("http://dcr.poolgpu.com");
                } else {
                    window.location.href = "/#/mainpage?cointype=" + cointype;
                }
            },
            changeUrl: function(coin) {
                if(coin == "ZEC") {
                    window.location.href = "http://zec.poolgpu.com/page/#/";
                } else if(coin == "BTX") {
                    window.location.href = "http://btx.poolgpu.com";
                } else if(coin == "DCR") {
                    window.location.href = "http://dcr.poolgpu.com";
                } else {
                    var thref = "/#/" + this.pagename + "?cointype=" + coin;
                    if(this.$route.query.miner) {
                        thref += "&miner=" + this.$route.query.miner;
                    }
                    window.location.href = thref;
                    this.$emit('update:cointype', coin);
                }
            }
        },
        mounted() {
            let that = this;
            if(that.pageindex == "2") {
                if(that.cointype) that.nowcoin = that.cointype.toUpperCase();
                return;
            }
        },
        props: ["pageindex", "cointype", "pagename"]
    }
</script>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }
    .banner {
        position: relative;
    }
    .banner .inner {
        position: relative;
        z-index: 1005;
        padding: 80px 0px;
    }
    .banner .inner h1 {
        margin-bottom: 30px;
    }
    .banner .inner .showcoins {
        min-width: 880px;
    }
    .banner .inner .cardwrap {
        display: inline-block;
    }
    .banner h1 {
        font-weight: 100;
        font-size: 36px;
        line-height: 1em;
        color: #ffffff;
        margin-bottom: 20px;
    }
    .headerwrap .el-tabs__item {
        color: #ffffff;
    }
    .banner .inner .el-card {
        background-color: rgba(0, 0, 0, 0);
        color: #ffffff;
        display: inline-block;
        margin-right: 40px;
        position: relative;
        left: 30px;
        cursor: pointer;
    }
    .banner .inner .secrow {
        margin: 40px auto;
        text-align: center;
    }
    .banner .inner .firow {
        margin: 40px auto;
        text-align: center;
    }
    .banner .inner .coinpic {
        width: 60px;
        height: 60px;
        margin: 0px auto;
        background-size: 100% 100%;
        margin-bottom: 20px;
    }
    .banner .inner .ethpic {
        background-image: url(../../assets/imgs/ethpic.png);
    }
    .banner .inner .etcpic {
        background-image: url(../../assets/imgs/etcpic.png);
    }
    .banner .inner .exppic {
        background-image: url(../../assets/imgs/newexp.png);
    }
    .banner .inner .zecpic {
        background-image: url(../../assets/imgs/zecpic.png);
    }
    .banner .inner .scpic {
        background-image: url(../../assets/imgs/scpic.png);
    }
    .banner .inner .btxpic {
        background-image: url(../../assets/imgs/btxpic.png);
    }
    .banner .inner .dcrpic {
        background-image: url(../../assets/imgs/dcrpic.png);
    }
    .banner .inner .xwcpic {
        background-image: url(../../assets/imgs/xwcpic.png);
    }
    .banner .inner .el-button--info {
        background-color: rgba(0, 0, 0, 0);
    }
    .banner .inner .el-button--info:hover {
        background-color: #50bfff;
    }
    .banner .datawrap .showcoinpic {
        width: 50px;
        height: 50px;
        margin: 0px auto;
        background-size: 100% 100%;
        margin-bottom: 20px;
        vertical-align: bottom;
        display: inline-block;
    }
    .banner .inner .datawrap {
        min-height: 500px;
        width: 80%;
        margin: 100px auto;
    }
    .banner .inner .el-carousel__item {
        background: rgba(0, 0, 0, 0.5);
        color: #ffffff;
    }
    .banner .inner .el-carousel__item h2 {
        padding-top: 15px;
    }
    .banner .inner .infopic {
        width: 100px;
        height: 100px;
        background-size: 100% 100%;
        margin: 55px auto;
    }
    .banner .inner .coinfo .fr,.banner .inner .coinfo .sr {
        display: inline-block;
    }
    .banner .inner .eachcoin {
        padding: 10px;
    }
    .banner .inner .maininfo {
        width: 75%;
        margin: 0px auto;
        padding: 20px 0px;
    }
    .banner .inner .coinfo {
        border-left: 1px solid rgba(255, 255, 255, 0.3);
    }
    .banner .inner .el-table tr {
        background: rgba(0, 0, 0, 0.1);
    }
    .banner .inner .el-table {
        background: rgba(0, 0, 0, 0.1);
        font-size: 14px;
        margin-top: 50px;
    }
    .banner .inner .el-table td,.banner .inner .el-table th {
        height: 80px;
        color: #ffffff;
    }
    .banner .inner .el-table th {
        text-align: center;
        background: rgba(0,0,0,0);
    }
    .banner .inner .el-table--striped .el-table__body tr.el-table__row--striped td {
        background: rgba(0, 0, 0, 0.3);
    }
    .banner .inner .el-table--enable-row-hover .el-table__body tr:hover>td {
        background: rgba(0, 0, 0, 0.5);
    }
    .banner .inner .el-table__header-wrapper th .cell {
        background: rgba(0, 0, 0, 0);
        color: #ffffff;
    }
    .banner .inner .el-table thead tr {
        background: rgba(0, 0, 0, 0.4);
    }
    .banner .inner .el-table {
        border: none;
    }
    .banner .inner .el-table::before,.banner .inner .el-table::after {
        background: none;
    }
    .banner .inner .el-table td,.banner .inner .el-table th.is-leaf {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .naviwrap {
        width: 100%;
        background-color: #20a0ff;
        min-width: 790px;
    }
    .navi {
        color: #ffffff;
        background-color: #20a0ff;
        position: relative;
        width: 80%;
        margin: 0px auto;
        height: 80px;
    }
    .navi h1 {
        float: left;
        font-size: 32px;
        font-weight: 400;
        margin-top: 22px;
    }
    .navi ul {
        float: right;
        height: 100%;
        position: relative;
        list-style-type: none;
    }
    .navi a {
        color: #ffffff;
        text-decoration: none;
    }
    .navi ul li {
        float: left;
        position: relative;
        cursor: pointer;
        margin-left: 20px;
        margin-top: 28px;
    }
    .navi .el-input--small {
        top: -2px;
        width: 100px;
    }
    .navi .el-input__icon+.el-input__inner {
        padding-right: 5px;
    }
    .navi ul li.isactive {
        font-weight: 700;
    }
    .navi ul li.isactive:before {
        content: "";
        display: block;
        position: absolute;
        bottom: -31px;
        left: 0px;
        width: 100%;
        height: 4px;
        background:#99d2fc;
    }
    .navi .logo-wrap {
        display: inline-block;
        width: 51px;
        height: 70px;
        background-image: url(../../assets/imgs/weblogo.png);
        background-size: 100% 100%;
        position: absolute;
        left: 0px;
        top: -15px;
    }
    .navi .logo-word {
        display: inline-block;
        position: absolute;
        left: 60px;
        top: 0px;
    }
    #hpagewrap .navi ul li,#helpagewrap .navi ul li {
        float: none;
        display: inline-block;
    }
    .notice_wrap {
        color: #ffffff;
        padding: 10px;
        background-color: #13ce66;
    }
    .navi .badgeitem {
        padding-right: 9px;
        padding-top: 2px;
        margin-right: 5px;
        position: relative;
        top: -3px;
    }
    .banner .newbtnbadge {
        margin-right: 10px;
    }
    .banner .search-box {
        width: 575px;
        margin: 30px auto;
        overflow: hidden;
    }
    .banner .search-box .el-select .el-input {
        width: 80px;
        color: #333333;
    }
    .banner .search-box > div {
        float: left;
    }
    .banner .search-box .input-with-select > input {
        width: 400px;
        margin-right: 10px;
    }
    .banner .search-box .el-button {
        padding: 10px 25px;
    }
</style>